<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>财务-结算记录</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/business.css">
</head>
<body>
<div id="uniocn" class="layui-layout layui-layout-admin">
    <div class="financeTitle">
        <button class="layui-btn layui-btn-ms">结算记录</button>
    </div>

    <div class="formBox">
        <form action="##" class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <select name="Keyword" lay-verify="required">
                        <option value="">关键字类型</option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="margin-right: 20px">
                    <select name="Settlement" lay-verify="required">
                        <option value="">结算类型</option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test" placeholder="选择时间">
                </div>
                <div class="layui-input-inline" style="margin-right: 0">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字"
                           autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-primary">搜索</button>
            </div>
            <button class="layui-btn layui-btn-primary">
                <img class="export" src="./images/export.png" alt="">导出记录
            </button>
        </form>
    </div>

    <div class="finance-record">
        <table class="layui-table" lay-skin="line">
            <colgroup>
                <col width="25%">
                <col width="25%">
                <col width="25%">
                <col width="25%">
            </colgroup>
            <thead>
            <tr>
                <th>商品信息</th>
                <th>订单信息</th>
                <th>订单金额</th>
                <th>时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in record">
                <td>{{item.business}}</td>
                <td>{{item.info}}</td>
                <td>{{item.orderPrice}}</td>
                <td>{{item.time}}</td>
            </tr>
            <tr>
                <td colspan="4" v-if="record.length<=0">暂无数据</td>
            </tr>
            </tbody>
        </table>
        <div id="test1"></div>
    </div>
</div>

<script src="layui/layui.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script>
    layui.use(['form', 'laydate', 'laypage'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var laypage = layui.laypage;
        //年月范围选择
        laydate.render({
            elem: '#test',
            range: true //或 range: '~' 来自定义分割字符
        });
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: 50 //数据总数，从服务端得到
        });
    })
    new Vue({
        el: "#uniocn",
        data: {
            record: [
                {business: "莫名商品", info: "不晓得", orderPrice: "0.2", time: "2017-08-12 12:23:10"}
            ]
        }
    })
</script>
</body>
</html>
